
@extends('Home.common.header')
<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}"> 
<!-- 引入bootstrap -->
<link href="{{ asset('/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- 注意:本css为匹配css 不公用 -->
<link href="{{ asset('/css/Goods-details.css') }}" rel="stylesheet">
<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<!-- js代码 -->
<script type="text/javascript" >
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var _token = $('meta[name="csrf-token"]').attr('content');

	// 图片轮播
	function change( id ){
		// 获取大图 对象
		var bigimg = document.getElementById("bigimg");
		// 获取小图 对象
		var smaimg = document.getElementById("pic_"+id);
		// 获取小图地址
		var ssrc = smaimg.getAttribute('src');
		// 设置为小图
		bigimg.setAttribute('src',ssrc);
		// 加边框
		smaimg.style.border = '1px solid blue';
		
	}
	
	// 边框变化
	function down(id){
		var smaimg = document.getElementById("pic_"+id);
		smaimg.style.border = '1px solid #ffffff';
	}
	
	// 商品详情页 购物车 只能执行 添加操作 且数量只能是1
	// 添加到购物车 商品ID
	function addToCart( com_id )
	{
		// 添加购物车 	
		$.ajax({
			type:"post",
			url:"{{ url('/insertCart') }}",
			data:{id:com_id,num:1,_token:_token},
			async:false,    					
			dataType:"html",
			success:function(back){
				if( back!='' ){
					$(function(){
						// 设置提示内容
						$("#show").html(back);
						$("#show").slideDown(500,function(){
							location.reload();
						});
					})
				}
			}
		});
			
	}
	
</script>

<body style="margin-top:4%;">


<!-- 详情区域 -->
<div>
	<div class="body-w1">

		<!-- 大图 -->
		@forelse($pics_info as $pic_info)
			<!-- 主图 -->
			@if( $pic_info->type == 1 )
			<div >
				<img id="bigimg" style="border-radius:10px;"  class="larger-img" src="{{ asset('/images/coms') }}/{{ $pic_info->pic_url }}" alt="">
			</div>
			@endif
		@empty
		@endforelse
		
		<!-- 小图 -->
		<div style="margin-left:2%;margin-top:3%;">
			<tr style="border:1px solid red;">
			@forelse($pics_info as $pic_info)
				<td style="border:1px solid red;">
					<img  class="button-img" id="pic_{{ $pic_info->id }}"  src="{{ asset('/images/coms') }}/{{ $pic_info->pic_url }}" onmouseover="change({{ $pic_info->id }});" onmouseout="down({{ $pic_info->id }})"; >
				</td>
			@empty
			@endforelse
			</tr>
		</div>
	</div>
			
			
	<!-- 商品详情 -->
	<div class="body-w2" style="margin-top:1%;" >
		<!-- 名字 -->
		<h2>{{ $com_info->name }}</h2>
		
		<section style="height:90px;margin-bottom:10px;" >
			<p style="font-size:16px;">{{ $com_info->description }}</p>
		</section>
		
		<section style="height:50px;">
			<div >
				<!-- 价格 -->
				<span style="font-size:26px;font-weight:bold;">
					￥{{ $com_info->price }}
				</span>
				<span style="font-size:16px;font-weight:bold;">&nbsp;&nbsp; 起</span>
			</div>
		</section>
		
		<div style="margin-left:5px;height:30px;">
				<span style="font-size:16px;color:red;">库存：</span><b style="font-size:18px;">{{ $com_info->stock }}</b>
		</div>
		
		<!-- 图片填充 -->
		<div style="padding:12px 0;height:140px;">
			<tr>
				<td>
					<img style="width:120px;" src="{{ asset('/images/coms/sku-1.png') }}" alt="">
				</td>
				<td>
					<img style="width:120px;" src="{{ asset('/images/coms/sku-2.png') }}" alt="">
				</td>
				<td>
					<img style="width:120px;" src="{{ asset('/images/coms/sku-3.png') }}" alt="">
				</td>
				<td>
					<img style="width:120px;" src="{{ asset('/images/coms/sku-4.png') }}" alt="">
				</td>
			</tr>
		</div>
		
		<!-- 提示信息 -->
		<div style="width:200px;height:30px;">
			<b  id="show" style="display:none;color:#FF3030;font-size:16px;" ></b>
		</div>
		
		<!-- 加入购物车按钮 -->
		<div style="padding-top:0px;">
			@if( $com_info->status==2 )
				<button style="width:190px;height:50px;" class="btn btn-info btn-danger" disabled >
					商品已下架
				</button>
			@elseif( $com_info->status==4 )
				<button style="width:190px;height:50px;" class="btn btn-info btn-danger" disabled >
					暂无库存
				</button>
			@else
				<!-- 上架/新品 -->
				<button style="width:190px;height:50px;" class="btn btn-info btn-danger"      onclick="addToCart( {{ $com_info->id }} );" >
					加入购物车
				</button>
			@endif
		</div>
	</div>
		
</div>

</body>


@extends('Home.common.footer')